<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()
const welcomeClass = ref('')
const currentTime = ref(new Date())
let timer: number | null = null

// 系统特点数据
const systemFeatures = [
  {
    icon: 'MapLocation',
    title: '实时监测',
    description: '通过高德地图API实现滑坡风险区域的实时监测和可视化展示',
  },
  {
    icon: 'Warning',
    title: '风险预警',
    description: '基于多维度数据分析，提供精准的滑坡风险预警信息',
  },
  {
    icon: 'DataAnalysis',
    title: '数据分析',
    description: '强大的数据分析功能，支持历史数据查询和趋势分析',
  },
]

// 快速入口数据
const quickAccess = [
  {
    icon: 'Location',
    title: '地图查看',
    route: '/map/view',
    color: '#67C23A',
  },
  {
    icon: 'Warning',
    title: '滑坡要素管理',
    route: '/admin/landslide',
    color: '#E6A23C',
  },
  {
    icon: 'User',
    title: '用户管理',
    route: '/admin/users',
    color: '#409EFF',
  },
]

onMounted(() => {
  // 添加进入动画类
  setTimeout(() => {
    welcomeClass.value = 'welcome-show'
  }, 100)

  // 更新时间
  updateTime()
  timer = window.setInterval(updateTime, 1000)
})

onMounted(() => {
  return () => {
    if (timer) {
      clearInterval(timer)
      timer = null
    }
  }
})

function updateTime() {
  currentTime.value = new Date()
}

function formatTime(date: Date): string {
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  const seconds = date.getSeconds().toString().padStart(2, '0')
  return `${hours}:${minutes}:${seconds}`
}

function formatDate(date: Date): string {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const weekdays = ['日', '一', '二', '三', '四', '五', '六']
  const weekday = weekdays[date.getDay()]
  return `${year}年${month}月${day}日 星期${weekday}`
}
</script>

<template>
  <div class="admin-welcome" :class="welcomeClass">
    <!-- 动态背景 SVG -->
    <div class="background-svg">
      <svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none">
        <!-- 网格背景 -->
        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path
            d="M 40 0 L 0 0 0 40"
            fill="none"
            stroke="rgba(64, 158, 255, 0.1)"
            stroke-width="1"
          />
        </pattern>
        <rect width="100%" height="100%" fill="url(#grid)" />

        <!-- 动态连接线 -->
        <g class="connecting-lines">
          <line x1="0" y1="100" x2="200" y2="300" class="line line1" />
          <line x1="100" y1="0" x2="300" y2="200" class="line line2" />
          <line x1="900" y1="100" x2="700" y2="300" class="line line3" />
          <line x1="800" y1="0" x2="600" y2="200" class="line line4" />
        </g>

        <!-- 动态圆点 -->
        <g class="floating-dots">
          <circle cx="100" cy="100" r="4" class="dot dot1" />
          <circle cx="300" cy="200" r="3" class="dot dot2" />
          <circle cx="700" cy="300" r="5" class="dot dot3" />
          <circle cx="900" cy="100" r="4" class="dot dot4" />
        </g>

        <!-- 装饰性多边形 -->
        <g class="decorative-polygons">
          <polygon points="50,50 60,40 70,50 60,60" class="polygon polygon1" />
          <polygon points="850,150 860,140 870,150 860,160" class="polygon polygon2" />
          <polygon points="150,850 160,840 170,850 160,860" class="polygon polygon3" />
        </g>
      </svg>
    </div>

    <!-- 顶部欢迎区域 -->
    <div class="welcome-header">
      <div class="header-left">
        <h1>欢迎使用巴中市滑坡风险预警系统</h1>
        <p class="subtitle">智能监测 · 及时预警 · 科学防控</p>
      </div>
      <div class="time-display">
        <div class="time">{{ formatTime(currentTime) }}</div>
        <div class="date">{{ formatDate(currentTime) }}</div>
      </div>
    </div>

    <!-- 系统介绍区域 -->
    <div class="system-intro">
      <el-card class="intro-card" shadow="hover">
        <div class="intro-content">
          <h2>系统简介</h2>
          <p>
            巴中市滑坡风险预警系统是一个基于地理信息系统（GIS）的综合性防灾减灾平台。系统通过整合多源数据，
            实现了滑坡风险的实时监测、预警发布和应急响应等功能，为巴中市的地质灾害防治工作提供了强有力的技术支持。
          </p>
        </div>
      </el-card>
    </div>

    <!-- 系统特点展示 -->
    <div class="features-grid">
      <el-card
        v-for="feature in systemFeatures"
        :key="feature.title"
        class="feature-card"
        shadow="hover"
      >
        <div class="feature-content">
          <el-icon :size="40" :color="'#409EFF'">
            <component :is="feature.icon" />
          </el-icon>
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
        </div>
      </el-card>
    </div>

    <!-- 快速访问区域 -->
    <div class="quick-access">
      <h2>快速访问</h2>
      <div class="access-grid">
        <router-link
          v-for="item in quickAccess"
          :key="item.title"
          :to="item.route"
          class="access-item"
        >
          <el-icon :size="24" :color="item.color">
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.title }}</span>
        </router-link>
      </div>
    </div>

    <!-- 管理员信息卡片 -->
    <el-card class="admin-info-card" shadow="hover">
      <template #header>
        <div class="admin-header">
          <el-icon>
            <User />
          </el-icon>
          <span>管理员信息</span>
        </div>
      </template>
      <div class="admin-content">
        <el-avatar :size="64" icon="User" />
        <div class="admin-details">
          <h3>{{ userStore.userInfo?.username }}</h3>
          <p>系统管理员</p>
          <el-tag type="success">已登录</el-tag>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.admin-welcome {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%, #f85032 100%);
  /* 红黄渐变背景 */
  overflow: hidden;
}

.background-svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;

  svg {
    width: 100%;
    height: 100%;
  }

  .line {
    stroke: rgba(255, 87, 34, 0.18);
    /* 橙红色线条 */
    stroke-width: 1.5;
    stroke-dasharray: 10;
    animation: moveLine 20s linear infinite;
  }

  .dot {
    fill: rgba(255, 193, 7, 0.4);
    /* 黄色圆点 */
    animation: floatDot 8s ease-in-out infinite;
  }

  .polygon {
    fill: rgba(255, 87, 34, 0.13);
    /* 橙红多边形 */
    animation: rotatePoly 10s linear infinite;
  }

  @for $i from 1 through 4 {
    .line#{$i} {
      animation-delay: #{$i * -5}s;
    }

    .dot#{$i} {
      animation-delay: #{$i * -2}s;
    }
  }

  @for $i from 1 through 3 {
    .polygon#{$i} {
      animation-delay: #{$i * -3}s;
    }
  }
}

@keyframes moveLine {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes floatDot {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(20px, 20px);
  }

  50% {
    transform: translate(0, 40px);
  }

  75% {
    transform: translate(-20px, 20px);
  }
}

@keyframes rotatePoly {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.intro-card,
.feature-card,
.admin-info-card {
  background: rgba(255, 244, 229, 0.85) !important; // 浅黄
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 87, 34, 0.18) !important; // 橙红边框
}

.welcome-header,
.system-intro,
.features-grid,
.quick-access,
.admin-info-card {
  position: relative;
  z-index: 1;
}

.welcome-header {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  animation: slideDown 0.8s ease;

  .header-left {
    h1 {
      font-size: 28px;
      color: #b71c1c; // 深红
      margin: 0;
      margin-bottom: 8px;
    }

    .subtitle {
      color: #e65100; // 橙色
      font-size: 16px;
    }
  }

  .time-display {
    text-align: right;
    animation: fadeIn 1s ease;

    .time {
      font-size: 32px;
      font-weight: bold;
      color: #f44336; // 红色
      margin-bottom: 4px;
    }

    .date {
      font-size: 14px;
      color: #ff9800; // 黄色
    }
  }
}

.system-intro {
  margin-bottom: 30px;
  animation: slideUp 0.8s ease 0.2s both;

  .intro-card {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: none;

    .intro-content {
      h2 {
        color: #b71c1c;
        margin-bottom: 16px;
      }

      p {
        color: #e65100;
        line-height: 1.8;
      }
    }
  }
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;

  .feature-card {
    animation: fadeIn 0.8s ease both;

    @for $i from 1 through 4 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.1 + 0.3}s;
      }
    }

    &:hover {
      transform: translateY(-5px);
    }

    .feature-content {
      text-align: center;
      padding: 20px;

      h3 {
        margin: 16px 0;
        color: #b71c1c;
      }

      p {
        color: #e65100;
        line-height: 1.6;
      }
    }
  }
}

.quick-access {
  margin-bottom: 30px;
  animation: slideUp 0.8s ease 0.6s both;

  h2 {
    margin-bottom: 20px;
    color: #b71c1c;
  }

  .access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;

    .access-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 15px;
      background-color: #fff3e0;
      border-radius: 8px;
      text-decoration: none;
      color: #b71c1c;
      transition: all 0.3s ease;

      &:hover {
        background-color: #ffe0b2;
        transform: translateY(-2px);
      }
    }
  }
}

.admin-info-card {
  animation: slideUp 0.8s ease 0.8s both;

  .admin-header {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .admin-content {
    display: flex;
    align-items: center;
    gap: 20px;

    .admin-details {
      h3 {
        margin: 0 0 8px 0;
        color: #b71c1c;
      }

      p {
        margin: 0 0 8px 0;
        color: #e65100;
      }
    }
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>
